<template>
  <div class='manage-roles'>
    <p class="title">{{title}}</p>

    <div class="btns-b" v-if="activeName=='/questions/manages'">
      <el-button v-for="(item,index) in btnsData" v-if="!item.isImport" :key="index" :type="item.type" class="btn-add fr" @click="item.click">{{item.label}}</el-button>
      <el-upload class="upload-demo" ref="upload" accept=".xls,.xlsx" :auto-upload="false"  action="https://jsonplaceholder.typicode.com/posts/" :on-change="handleChange" :show-file-list="false">
        <el-button size="small" type="primary">上传</el-button>
      </el-upload>
    </div>
    <!-- <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-change="handleChange" :show-file-list="false">
    </el-upload> -->

    <el-tabs v-model="activeName" class="tab-box normal-tab" @tab-click="handleClick">
      <el-tab-pane class="table-box" v-for="(item,index) in tabData" :key="index" :label="item.label" :name="item.url">
        <router-view />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  components: {},
  name: "",
  data() {
    return {
      title: "答题闯关",
      btnsData: [
        { label: "删除", type: "primary", click: this.delete },
        { label: "导入", isImport: true, type: "primary", click: this.import },
        { label: "新增", type: "primary", click: this.add },
      ],
      tabData: [
        { label: "闯关设置", url: "/questions/settings" },
        { label: "题库管理", url: "/questions/manages" },
      ],
      activeName: "/questions/settings"
    };
  },
  methods: {
    delete(){
      console.log("删除")
    },
    // 导入
    import() {
      console.log(document.querySelector(".upload-demo"));
      document.querySelector(".upload-demo").click();
    },
    handleChange() {},
    // 新增
    add() {
      this.$store.state.add.show = true;
    },
    handleClick() {
      console.log(this.activeName);
      this.$router.push(this.activeName);
    },
    setActive(){
      this.$set(this,"activeName",_g.getRouterPath(this))
    }
  },
  created() {
    this.setActive()
  }
};
</script>
<style lang="scss" scoped>
.manage-roles {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  overflow: auto;

  .title {
    font-weight: 600;
    font-size: 20px;
    background-color: #fff;
    text-indent: 20px;
    height: 60px;
    line-height: 60px;
    box-sizing: border-box;
    // border-bottom: 1px solid #ebeef5;
  }
  .tab-box {
    height: calc(100% - 60px);
    display: flex;
    flex-direction: column;

    .table-box{
      height: 100%;
      display: inherit;
    }
  }
  .upload-demo{
    float: right;
    width: 90px;
    height: 35px;
    margin-right: 10px;
    margin-top: 12.5px;
  }
  .btns-b{
    position: absolute;
    right: 20px;
    top: 40px;
  }
}
</style>